<template>

  <!-- 定义布局容器 -->
  <el-container class="home-container">
    <!-- <TheFooter></TheFooter> -->
    <!-- top -->



    <!-- 定义中间区域-->
    <el-card class="box-card">
    <el-container>
      <!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值-->
      <el-aside :width="isCollapse ? '64px' : '200px' ">
        <!-- 这是左侧菜单-->

        <!--定义折叠项-->
        <div class="leftCollapse" @click="collspseClick"></div>

        <!--
          background-color 定义背景色
          text-color="#fff"  定义文字颜色
          active-text-color="#4094ff" 选中元素的颜色
          unique-opened 是否只保持一个子菜单的展开
          collapse      是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
          collapse-transition	是否开启折叠动画 默认不要展现
          router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        -->

       <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu background-color="#ffffff" text-color="black" active-text-color="#000000" unique-opened
        :collapse="isCollapse" :collapse-transition="isCollapseTransition"  :default-active="defaultActive">

          <!-- 定义一级菜单 -->
          <el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id">
            <!-- 定义一级菜单模版 -->
            <template slot="title">
              <!-- 定义左侧图标-->
              <i :class="menuIcon[menu.id]"></i>
              <!-- 定义菜单名称-->
              <span>{{menu.name}}</span>
            </template>
            <!-- 定义二级菜单 -->
            <!-- <el-submenu :index="childrenMenu.id+''" v-for="childrenMenu in menu.children" :key="childrenMenu.id"
            v-if="" @click="defaultActiveMenu(childrenMenu.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{childrenMenu.name}}</span>
              </template> -->

               <el-menu-item :index="childrenMenu1.id+''" v-for="childrenMenu1 in menu.children" :key="childrenMenu1.id"
                  @click="defaultActiveMenu(childrenMenu1.path)" sl>
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span @click="tiaozhuan4(childrenMenu1.id)">{{childrenMenu1.name}}</span>
                    </template>
               </el-menu-item>


            <!-- </el-submenu> -->
            <!-- 定义三级菜单 -->




          </el-submenu>
        </el-menu>


      </el-aside>

      <!-- 定义主页面结构-->
      <el-main>
        <!-- 定义路由展现页面-->
        <el-card>
          <router-view></router-view>
        </el-card>

      </el-main>

    </el-container>
    </el-card>



  </el-container>
</template>

<script>
  import TheHeader from "../the/TheFooter.vue";
  import TheFooter from "../the/TheHeader.vue";

  export default {
    //初始化函数
    created() {
      //动态获取左侧菜单信息
      this.getMenuList()
      //设定模式选中按钮
      this.defaultActive = window.sessionStorage.getItem("activeMenu")
    },
    components:{
      TheHeader,
      TheFooter,
    },
    data() {
      return {
        //activeIndex: '1',
        activeIndex2: '2',

        //左侧菜单数据
        menuList: [],
        menuIcon: {
          '1': 'iconfont iconuser',
          '9': 'iconfont iconshangpin',
          '10': 'iconfont iconicon--copy',
          '11': 'iconfont iconquanxian',
          '35': 'iconfont iconziyuan',
          '27': 'iconfont iconziyuan'
        },
        //定义是否折叠
        isCollapse: false,
        //是否展现折叠动态效果
        isCollapseTransition: false,
        //定义默认高亮
        defaultActive: ''
      }
    },
    methods: {
      tiaozhuan1(){
           this.$router.push("/index")
      },
      tiaozhuan2(){
        this.$router.push("/shopping")
      },
      tiaozhuan3(){
           this.$router.push("/about")
      },
      tiaozhuan4(id){
           console.log('id:'+id)

          window.eventBus.$emit('current', id)

           this.$router.push({
            path:'/yinlianbang1',
          })
      },
      logout() {
        //1.删除session中的数据
        window.sessionStorage.clear()
        //2.用户访问登录页面
        this.$router.push('/login')
      },
      async getMenuList() {
       const {data: result} =  await this.$http.get('/shop/getShopList')//findItemCatList
       if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
       this.menuList = result.data
       console.log(this.menuList)

      },
      //设定左侧折叠展开效果
      collspseClick() {
        this.isCollapse = !this.isCollapse
      },
      defaultActiveMenu(activeMenu){
        //为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory

        if(activeMenu == null)return
        window.sessionStorage.setItem("activeMenu",activeMenu)
        this.defaultActive = activeMenu

      }
    }
  }
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
  .el-header {
    background-color: rgb(43,42,50);
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
  }

  .el-aside {
    // background-color: rgb(43,42,50);

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #EEEEEE;
    background-image: url('../../assets/img/2.png') ;
  }

  .home-container {
    //overflow: auto
     height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  .touxiang_box {
            height: 15px;
            width: 15px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 5px #ddd;
            position: absolute;
            left: 87%;
            background-color:#ddd ;
            img{
                width: 100%;
                height: 100%;
                border-radius: 100%;
                padding: auto;
            }
  }
</style>
